<template>
  <div>
    <input type="text" v-model="value" v-if="!flag" @keyup.enter="add" v-focus />
    <button v-if="flag" @click="flag = false">+ New Tag</button>
    <MyTag :list="list"></MyTag>
  </div>
</template>
<script>
import MyTag from "./06zuoye/Tag/MyTag3.vue";
export default {
  components: {
    MyTag,
  },
  data() {
    return {
      value: "",
      flag: true,
      list: [],
    };
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  created() {},
  computed: {},
  methods: {
    add() {
      this.list.push(this.value);
      this.value = "";
      this.flag = true;
    },
  },
};
</script>
<style lang='less'  scoped>
input {
  width: 100px;
  height: 40px;
  border-radius: 20px;
}
button {
  width: 100px;
  height: 40px;
  border-radius: 20px;
}
</style>
